<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>广告位信息 AD Form</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="stylesheet" th:href="@{/statics/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/statics/style/admin.css}" media="all"/>
    <style type="text/css">
        html{background-color: #FFF;}
        .pic {margin-left: 130px;}
        .pic dl {float: left;position: relative;}
        .pic dl dd {position: absolute;right: 5px;top: 5px;cursor: pointer;background: #666;color: #fff;padding: 2px;}
        .pic img {height: 100px;margin: 5px 0;margin-right: 5px;}
    </style>
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-form-slide" id="layuiadmin-form-slide" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">文字</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入广告显示文字"
                   class="layui-input" th:value="${picture.title}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-inline">
            <input type="text" name="image" id="image" placeholder="请上传图片" class="layui-input" th:value="${picture.image}">
        </div>
        <button type="button" class="layui-btn upload upload-pic" id="upload-picture" data-des="image">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <div class="pic pic_box">
            <dl th:if="${picture.image}">
                <dt><img th:src="${picture.image}" th:data-url="${picture.image}"></dt>
                <dd name="deleteFile" th:data-url="${picture.image}" data-des="image">删除</dd>
            </dl>
        </div>
    </div>
    <div class="layui-form-item" th:if="${slide.type} == 'video'">
        <label class="layui-form-label">视频</label>
        <div class="layui-input-block">
            <input type="text" name="video" autocomplete="off" placeholder="请输入视频地址" class="layui-input" th:value="${picture.video}"/>
            <div class="layui-form-mid layui-word-aux">请媒体相册中复制视频地址并粘贴。</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开始时间</label>
        <div class="layui-input-block">
            <input type="text" name="beginTime" lay-verify="datetime" readonly
                   placeholder="请选择开始时间" class="layui-input datetime" th:value="${#dates.format(picture.beginTime,'yyyy-MM-dd HH:mm:ss')}"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">到期时间</label>
        <div class="layui-input-block">
            <input type="text" name="endTime" lay-verify="datetime" readonly
                   placeholder="请选择到期时间" class="layui-input datetime" th:value="${#dates.format(picture.endTime,'yyyy-MM-dd HH:mm:ss')}"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <textarea name="description" placeholder="广告位描述"  class="layui-textarea">[[${picture.description}]]</textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">序号</label>
        <div class="layui-input-block">
            <input type="text" name="sorting" lay-verify="required" autocomplete="off" placeholder="请输入序号"
                   class="layui-input" th:value="${picture.sorting == null || picture.sorting <= 0 ? 255 : picture.sorting}"/>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="hidden" name="id" th:value="${picture.id}"/>
        <input type="hidden" name="slideId" th:value="${slide.id}"/>
        <input type="hidden" name="lang" th:value="${slide.lang}"/>
        <button class="layui-btn" lay-submit lay-filter="LAY-slide-add-submit" id="LAY-slide-add-submit">提交</button>
    </div>
</div>

<script th:src="@{/statics/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/statics/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'upload', 'laydate', 'form'], function () {
        var $ = layui.$
            , form = layui.form
            , laydate = layui.laydate
            , upload = layui.upload;

        laydate.render({
            elem: '.datetime'
            ,type: 'datetime'
        });

        upload.render({
            elem: '.upload-pic'
            , url: '/api/file/local/upload'
            , accept: 'images'
            , method: 'post'
            , multiple: false //多文件上传
            , acceptMime: 'image/*'
            ,before: function(obj){
                layer.load(); //上传loading
            }
            ,done: function(res){
                var item = this.item;
                var des=$(item).data('des');
                console.log(des);
                layer.closeAll('loading'); //关闭loading
                if(res.code==0){
                    $('#'+des).val(res.data);
                    layer.msg('上传成功！');
                }else{
                    layer.msg('上传失败！');
                }
            }
            ,error: function(){
                layer.closeAll('loading'); //关闭loading
                layer.msg('上传发生错误！');
            }
        });

        $('dd[name="deleteFile"]').on('click' , function(){
            var url = $(this).data('url');
            var des = $(this).data('des');
            var picbox = $(this).parent().parent();
            $.ajax({
                url: '/api/file/local/remove?key=' + url,
                method: 'DELETE',
                contentType: "application/json;charset=UTF-8",
                dataType: 'JSON',
                success: function (res) {
                    if (res.code == '0') {
                        layer.msg('文件已删除!', {icon: 1, time: 1000}, function () {
                            picbox.hide();
                            $('#'+des).val('');
                        });
                    } else {
                        layer.msg(res.msg);
                    }
                },
                error: function (err) {
                }
            });
        });
    })
</script>
</body>
</html>